<script setup>
import { watch,ref,onMounted } from "vue"
import {saveClientConfig, getClientConfig, delClientConfig} from "@/store/ConfigStore.js"
import { UploadFilled } from '@element-plus/icons-vue'

// 定义本地消息状态类型
const TransportMsgType = {
  self:-1,
  text:0,
  file:1,
}

// 定义传输消息列表
const transportMessageList = ref([])
// 在线的客户端
const clientList = ref([])

const file = ref(null)

// 定义个性化设置的配置
const clientConfig = ref({
  autoDown:false,
  autoCopyText:false,
  autoReleaseConnection:false
})


const changeConfig = ()=>{
  saveClientConfig(clientConfig.value)
}

// 下载文件
const downloadFile = () => {
  if (!file.value) return;

  // 触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(file.value);
  downloadLink.download = file.value.name;
  downloadLink.click();

  // 释放 URL 对象
  URL.revokeObjectURL(downloadLink.href);
};

// 处理文件选择
const handleFileChange = (f, fileList) => {
  console.log('Selected file:', f);
  console.log('File list:', fileList);
  file.value = f.raw; // 获取选中的文件
}

const handleBeforeUpload=(file)=> {
  // 阻止默认上传行为
  return false;
}

// 使用watch的深度监听
watch(()=> clientConfig,(newValue,oldValue)=>{
  console.log("old:",oldValue,"new:",newValue)
  changeConfig()
},{deep:true})

onMounted(() => {

  clientConfig.value = getClientConfig()
  
  transportMessageList.value.push({name:"clientA",type:TransportMsgType.text,data:"hello"})
  transportMessageList.value.push({name:"clientB",type:TransportMsgType.file,data:"hello2.zip"})
  transportMessageList.value.push({name:"clientC",type:TransportMsgType.text,data:"hello3"})
  transportMessageList.value.push({name:"我",type:TransportMsgType.self,data:"a.txt"})

  clientList.value.push({name:"clientA",key:"clientA key"})
  clientList.value.push({name:"clientB",key:"clientB key"})
  clientList.value.push({name:"clientC",key:"clientC key"})
  clientList.value.push({name:"clientD",key:"clientD key"})
})

</script>

<template>
  <main class="xl:container xl:mx-auto h-screen bg-[#efefef]  flex justify-end py-10">
    <!-- 主布局 -->
    <div class="flex flex-col-reverse w-full mr-8">

      <!-- 底部文件上传框 -->
      <div class="bg-white p-4 h-24 rounded-2xl  shadow-md w-full ">
        <h1 class=" text-center w-full h-full" @click="downloadFile">点击或者拖动文件到此处与全部在线客户端传输文件</h1>
      </div>

      <div class="w-full h-full flex flex-col ">
        <!-- 中间在线的客户端 -->
        <div class="w-full h-auto flex flex-wrap gap-y-4 gap-x-12 p-4">

          <!-- 单个客户端的布局 -->
          <div class="bg-white p-2 rounded-2xl w-60 h-40 flux flux-col shadow-md" v-for="(item, index) in clientList"
            :key="index">

            <div>{{ item.name }}</div>
            <div class="relative w-full h-full">
              <el-upload class="upload-demo w-full absolute inset-0" drag action="#" multiple 
                :before-upload="handleBeforeUpload" :on-change="handleFileChange">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">拖拽文件到这里，或<em>点击上传</em></div>
              </el-upload>
            </div>

          </div>

        </div>
      </div>
      <div class="flex ">

      </div>
    </div>

    <!-- 右侧面板 -->
    <div class="flex flex-col gap-4 w-full max-w-xs">
      <!-- 个性化设置 -->
      <div class="bg-white p-4 rounded-lg  shadow-md">
        <h3 class="text-lg font-semibold">个性化设置：</h3>
        <div class="mt-2">
          <label class="block">
            <el-switch v-model="clientConfig.autoDown" /> 自动下载传输文件
          </label>
          <label class="block mt-2">
            <el-switch v-model="clientConfig.autoCopyText" /> 自动复制文字消息
          </label>
          <label class="block mt-2">
            <el-switch v-model="clientConfig.autoReleaseConnection" /> 自动回收连接
          </label>
        </div>
      </div>

      <!-- 传输记录 -->
      <div class="flex flex-col w-full gap-2">
        <div class="bg-white p-2 rounded-md shadow-md">
          <h3 class="text-lg font-semibold italic text-center">传输记录</h3>
        </div>

        <!-- 消息列表 -->
        <div class="bg-white rounded-lg shadow-md p-5 ">
          <div class="flex flex-col w-full gap-1" v-for="(item, index) in transportMessageList" :key="index">
            <div class=" flex flex-row gap-1">

              <div v-if="item.type != TransportMsgType.self" class="text-yellow-400">{{item.name}}:</div>
              <div v-else class="text-green-500">我:</div>

              <div v-if="item.type == TransportMsgType.text">{{ item.data }}</div>
              <div v-else="item.type == TransportMsgType.file" class="flex flex-row gap-1">
                <div>发送了文件</div>
                <div class="no-underline hover:underline text-blue-600">{{item.data}}</div>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>


  </main>
</template>



<style scoped></style>